CSS 逆引き
「名前がわからんけど、CSSでこれやりたい」、をメモる
これをやらないと全然知識が蓄積されていかない気持ちになったmrsekut.icon
図があるとわかりやすい
codepen的なリンクがあると良い
ここじゃないがmrsekut.icon
CSS、選択肢が複数あるときの正解がわからない
レスポンシブをやりたい時に、mediaを使う方法と使わなくてもできる方法があった場合、常に後者の方が優位なのか
コンテンツが大きすぎて壊れた、などのあるあるの対策を8つほど紹介
Flexbox Wrapping
Image Distortion
長いコンテンツがはみ出た
Component Spacing
Background repeat
CSS grid fixed values
CSS Variable Fallback
こういうレスポンシブ
https://gyazo.com/eeea14f7a158e3eca0e4de52432a5828
spも2columnだったmrsekut.icon
赤い部分が画像で、正方形にしたい
青い部分は文章
できればmediaを使わずに実現したい
むりだったmrsekut.icon
悩みポイント
画像を正方形に
spの場合はリストは縦並び
spの場合は中身も縦並び
画像データはサイズが統一されているとは限らない
画像サイズがバラバラなやつは未対応mrsekut.icon
画面を狭めるとstyleが崩れる
2columnリスト
レスポンシブ
色々選択肢がある
flex, width:50%
grid
float
画像をトリミングする
object-fit: coverなどを使う
画像を正方形に保つ
height/widthを明示しなくても正方形になってほしい
横幅は100%にして、縦幅は横幅と同じにしたい
トリッキー。自分で見つけるの無理やろ
このやり方だと、横：縦 = 2：3とかもできて便利そう
カードみたいなデザインって何のタグ使って囲うの？
全体はどこかのページのリストになっているが、anchorという感じでもない気もする
スクボのページ下のリンクはanchorだな
カードという感じでもないけど
https://gyazo.com/1eb76a5535d05143c507b6581fa2d21e
afterの中では、三角矢印の指定をしている
.leftでは、丸の指定をしている
code:css
.left {
display: inline-block;
width: 4em;
height: 4em;
border: 0.5em solid #333; border-radius: 50%;
margin-right: 1.5em;
}
.left:after {
content: '';
display: inline-block;
margin-top: 1.05em;
margin-left: 0.6em;
width: 1.4em;
height: 1.4em;
border-top: 0.5em solid #333; border-right: 0.5em solid #333; -moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
https://gyazo.com/bb73f329249d553dd002ae22daf752e0